<template>
<teleport
to="body"
><div class="login" v-show="judges">
        <div class="sure">
            <slot name="no1"></slot>
            <slot name="no2"></slot>
            <slot name="no3"></slot>
            <slot name="no4"></slot>
            <slot name="no5"></slot>
            <slot name="no6"></slot>
            <div class="message">
                {{title}}
            </div>
            <button @click="sure">确定</button>
            <button @click="cacel">取消</button>
        </div>
    </div>
</teleport>  
</template>

<script setup>
import {defineProps,defineEmits} from 'vue'
const porps = defineProps(['judges','title'])
const emit = defineEmits(['queding','quxiao'])
let sure=()=>{
    emit("queding")
}
let cacel=()=>{
    emit("quxiao")
}
</script>
<style scoped>
.login{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,.5);
    left: 0;
    top: 0;
}
.sure{
    width: 50%;
    height: 30%;
    background-color: white;
    border-radius: 15px;
    position: absolute;
    left: 50%;top: 50%;
    transform: translate(-50%,-50%);
}
.message{
    min-height: 50px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 50px;
    text-align: center;
    line-height: 50px;
}
button{
    border: 1px solid #ccc;
    width: 75px;
    height: 35px;
    margin-right: 30px;
    margin-left: 10px;
}
</style>